<template>
	<view>
		<view class="tabs" v-if="list.length <= 5">
			<view class="tab-item" v-for="(item, index) in list" :key="index" :class="{ active: activeTab == item }" @tap="tap(item, index)">{{ item }}</view>
		</view>
		<view class="tabs more-tabs" v-if="list.length > 5">
			<scroll-view :scroll-x="true" scroll-with-animation :scroll-into-view="scrollIndex">
				<view class="tab-item" v-for="(item, index) in list" :key="index" :class="{ active: activeTab == item }" @tap="tap(item, index)"
				 :id="`tab_${index}`">
					{{ item }}
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['list', 'value'],
		data() {
			return {
				scrollIndex: `tab_${0}`,
				isRefresh: false
			};
		},
		computed: {
			activeTab() {
				if (this.value) return this.value;
				else if (this.list && this.list.length) return this.list[0];
				else return '';
			}
		},
		methods: {
			tap(value, index) {
				if (!this.isRefresh) {
					this.isRefresh = true;
					let scrollIndex = index - 2;
					scrollIndex = scrollIndex <= 0 ? 0 : scrollIndex;
					this.scrollIndex = `tab_${scrollIndex}`;
					this.$emit('input', value);
					this.$emit('change', {
						value,
						index
					});
					setTimeout(() => {
						this.isRefresh = false;
					}, 200)
				}

			}
		}
	};
</script>

<style lang="stylus" scoped>
	.tabs {
		background-color #ffffff;
		height 80rpx;
		font-size 24rpx;
		display flex;
		justify-content space-around;
		white-space nowrap;
		border-bottom 1px solid rgba(245, 245, 245, 1);
		min-width 100%;
		overflow-x auto;
	}

	.tab-item {
		display inline-block;
		min-width 100rpx;
		text-align center;
		color rgba(153, 153, 153, 1);
		flex 1;
		font-size 24rpx;
		font-weight: 600;
		display flex;
		align-items center;
		justify-content center;

		&.active {
			font-weight: 600;
			position relative;
			color rgba(255, 125, 33, 1);
			// background linear-gradient(92deg, rgba(255, 96, 96, 1) 0%, rgba(255, 28, 50, 1) 100%);
			// -webkit-background-clip text;
			// -webkit-text-fill-color transparent;
			position relative;
			&::after {
				content '';
				position absolute;
				width 50%;
				height 6rpx;
				bottom 0rpx;
				background-color rgba(255, 125, 33, 1);
				border-radius 3rpx;
			}
		}

	}

	.tabs.more-tabs {
		justify-content space-between;
	}
</style>
